import React, { useEffect, useState } from "react";
import { youthlist } from "../sevice/postQuery";
import { Arrow, Like } from "@react-vant/icons";
import style from "../css/Home.module.css";
import { ProductCard, Tag, Button } from "react-vant";
import { List, PullRefresh } from "react-vant";
import { useNavigate } from "react-router-dom";
import { Tabs } from "react-vant";
import { Cell } from "react-vant";
import { data } from "browserslist";

export default function Youthlist() {
  let [list, setList] = useState([]);
  let navigate = useNavigate();
  let [a, seta] = useState(1);
  let [b,setb]=useState(1)
  let [listdata, setListdata] = useState([]);
  let [max, setMax] = useState();
  let [yu, setYu] = useState();
  const [finished, setFinished] = useState(false); //true表示不加载
  // let [index, setIndex] = useState([1, 2, 3]);
  // let max = parseInt((listdata.length + 1) / 5) + 1;

  // console.log(max, "lallflalf");
  // 加载更多
  const onLoad = async () => {
    if (list?.length > max) {
      setFinished(true);
    } else {
      let { data } = await youthlist({ pageNum: a, pageSize: 6 });
      console.log(data.rows, "啦啦啦1111111111");
      setList([...list, ...data.rows]);
      seta(a + 1); //a只能到2.
    }
  };
  const onRefresh =async  () => {
    console.log(9999);
    setFinished(false)
    if (list?.length > max) {
      setFinished(true)
    } else {
      let { data } = await youthlist({ pageNum: b, pageSize: 6 })
      setList([...data.rows, ...list])
      setb(b+1)
    }
  }
  useEffect(() => {
    // console.log(yu,"lall");
    (async () => {
      let { data: listdata } = await youthlist();
      setListdata([...listdata.rows]);
      setYu(listdata?.rows.length % 5);
      setMax(listdata?.rows.length - (listdata?.rows.length % 5));
    })();
    onLoad();
    onRefresh()
  }, []);
  // 查看数据
  useEffect(() => {
    console.log(list, "list");
    console.log(listdata, "listdata");
    console.log(yu, "ggggggggggggggggggggggggggggggggggggggggggggg");
    console.log(max, "啦啦啦啦啦啦");
  }, [list, listdata, yu, max]);
  let btn = (id) => {
    console.log(id);
    console.log("lalfla", id);
    window.localStorage.setItem("btnid", id);
    navigate(`/post/post/${id}`);
  };
  return (
    <div
      style={{
        marginTop: "40px",
      }}
    >
      <Cell value="驿站" />
      <PullRefresh onRefresh={onRefresh}>
      <List
        finished={finished}
        onLoad={() => {
          onLoad();
        }}
      >
        {list.map((item) => {
          return (
            <ProductCard
              desc={item.introduce}
              title={item.name}
              thumb={"/api" + item.coverImgUrl}
              key={item.id}
              onClick={() => {
                btn(item.id);
              }}
              className={style.ProductCard}
              tags={
                <>
                  <Tag
                    plain
                    style={{ marginRight: 5 }}
                    className={style.tagname}
                  >
                    {item.address}
                  </Tag>
                  <Tag round type="warning" className={style.warning}>
                    {item.phone}
                  </Tag>
                </>
              }
              footer={
                <>
                  <></>
                  <Button round size="small">
                    更多
                  </Button>
                  <Button
                    icon={<Like />}
                    round
                    color="linear-gradient(to right, #ff6034, #ee0a24)"
                    size="small"
                  >
                    Like
                  </Button>
                </>
              }
            />
          );
        })}
      </List>
      </PullRefresh>
    </div>
  );
}
